<!DOCTYPE html>
<html >

<head>
  <meta charset="utf-8">

  <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>首页</title>
  <meta name="description" content="">
  <meta name="author" content="YANXUEFENG">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./css/zepto.carousel.css" />
</head>

<body>
  <!-- loading效果 -->
  <section class="loading-box">
    <div class="loading">
      <img src="./images/loading.gif" alt="">
      <p>请横屏使用哦(✪ω✪)~</p>
    </div>
  </section>


  <!-- 没有详情页提示框 -->
  <section class="mask">
    <div class="modal">
      <img src="./images/close.png" alt="">
      <p>没有更多啦(╯﹏╰)</p>
    </div>
  </section>

  <!-- 轮播图 -->
  <div class="box">
    <ul class="js-carousel">
      <!-- <li><img src="./images/banner1.png" alt=""></li>
      <li><img src="./images/banner2.png" alt=""></li>
      <li><img src="./images/banner3.png" alt=""></li>
      <li><img src="./images/banner4.png" alt=""></li>
      <li><img src="./images/banner5.png" alt=""></li>
      <li><img src="./images/banner6.png" alt=""></li>
      <li><img src="./images/banner7.png" alt=""></li>
      <li><img src="./images/banner8.png" alt=""></li> -->
    </ul>
    <button class="prev"><</button>
    <button class="next">></button>
  </div>
  <script type="text/html" id="template">
    {{ each data as val index}} 
    <li data-id="{{val.id}}" data-img="{{val.img}}">
      <p>{{val.categoryName}}</p>
      <img id="carousel-img" src="{{val.img}}">
      <p>{{val.categoryName}}</p>
    </li>
    {{ /each }}
  </script>
  <script src="js/zepto.js"></script>
  <!-- <script src="./js/ajax.js"></script> -->
  <script src="./js/event.js"></script>
  <script src="./js/touch.js"></script>
  <script src="./lib/artTemplate-master/dist/template.js"></script>
  <script src="./js/zepto.carousel.js"></script>
  <script src="./js/index.js"></script>
</body>

</html>